﻿@{
    ViewBag.Title = "printTemplate";
    Layout = null;
}
<table id="marbleTable_printTemplateHeaders" class="stripe row-border order-column" style="width: 100%">
    <thead>
        <tr>
            <th>Template Id</th>
            <th>Template Name</th>
            <th>Font Name</th>
            <th>Font Size</th>
            <th>Preview</th>
            <th>Add</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in ViewBag.PrintTemplateHeadersAndItems)
        {  
            <tr>
                <td>
                    <lable> @(item.TemplateId == 0 ? "" : item.TemplateId) </lable>
                </td>
                <td>
                    <input type="text" value="@item.TemplateName" />
                </td>
                <td>
                    <select name="fontName">
                        @foreach (var dow in ViewBag.FontNameList)
                        {
                            if (@item.FontName == @dow)
                            {
                            <option value="@dow" selected style="font-family:@dow">@dow</option>
                            }
                            else
                            {
                            <option value="@dow" style="font-family:@dow">@dow</option>
                            }
                        }
                    </select>
                </td>
                <td>
                    <input type="text" value="@(item.FontSize == 0 ? 8 : @item.FontSize)" />
                </td>
                <td>
                    <button>--</button></td>
                <td>
                    <button onclick="AddTemplateHeader()">Add</button></td>
            </tr>  
        }
    </tbody>
</table>
<script>
    $(document).ready(function () {
        var table = $('#marbleTable_printTemplateHeaders').DataTable({
            scrollY: "400px",
            scrollX: true,
            scrollCollapse: true,
            editable: true,
            stateSave: true,
            bPaginate: false,
            bInfo: false,
            bFilter: false,
            bSort: false,
            "createdRow": function (row, data, index) {
                $('td', row).addClass('tblRow');
            },
            rowCallback: function (row, data) {
                var element = $('td', row);
                element.on("change", function (e) {
                    UpdatedList($(this).parent().index());
                });
            }
        });
        var counter = 1;

        $(".tblRow").on("change", function (e) { UpdatedList($(this).parent().index()); });
        $(".tblRow").on("click", function (e) { UpdatePrinterTemplateList($(this).parent().index()); });
    });
    function AddTemplateHeader() {
        $('#marbleTable_printTemplateHeaders').DataTable().row.add([
                '<lable></lable>',
                '<input type="text" value="" />',
                '<input type="text" value="" />',
                '<input type="text" value="" />',
                '<button>--</button>',
                '<button onclick="AddTemplateHeader()">Add</button>'
        ]).draw(false);
    }
    var selectedItem = -1;
    function UpdatedList(index) {
        if (!updatedArray.includes(index)) {
            updatedArray.push(index);
        }
    }
    function UpdatePrinterTemplateList(index) {
        if (index != selectedItem) {
            var id = document.getElementById('marbleTable_printTemplateHeaders').rows[1].cells[0].children[0].innerHTML;
            if (id == null || id == undefined || id.trim() == '') {
                id = '0';
            }
            $('#templateData').load('/SiteSetup/PrintTemplateDataItems?headerId=' + id.trim());
            selectedItem = index;
        }
    }
    function SavePrintTemplates() {
        var template,templateDateItems = [];
        var table = document.getElementById('marbleTable_printTemplateHeaders');
        var headeTableRowIndex = selectedItem + 1;

        var fixedcolumn1 = $('.DTFC_Cloned lable.fixedCol1');
        var fixedcolumn2 = $('.DTFC_Cloned input.fixedCol2');
        var table_templateItems = document.getElementById('marbleTable_printTemplate');
        for (var r = 0, n = table_templateItems.rows.length; r < n; r++) {
            if (updatedArray.includes(r)) {
                var rowIndex = r + 1;
                var Col1Alignment_index = table_templateItems.rows[rowIndex].cells[4].children[0].options["selectedIndex"];
                var Col2Alignment_index = table_templateItems.rows[rowIndex].cells[6].children[0].options["selectedIndex"];
                var Col3Alignment_index = table_templateItems.rows[rowIndex].cells[8].children[0].options["selectedIndex"];
                var Col4Alignment_index = table_templateItems.rows[rowIndex].cells[10].children[0].options["selectedIndex"];
                var Col5Alignment_index = table_templateItems.rows[rowIndex].cells[12].children[0].options["selectedIndex"];
                var selectedFontIndex_dataItem = table_templateItems.rows[rowIndex].cells[13].children[0].options["selectedIndex"];
                debugger;
                templateDateItems.push({
                    Id: fixedcolumn1[r].innerHTML,
                    TemplateId: table.rows[headeTableRowIndex].cells[0].children[0].innerHTML,
                    Section: fixedcolumn2[r].value,
                    Sequence: table_templateItems.rows[rowIndex].cells[2].children[0].value,
                    Col1Data: table_templateItems.rows[rowIndex].cells[3].children[0].value,
                    Col1Alignment: table_templateItems.rows[rowIndex].cells[4].children[0].options[Col1Alignment_index].innerText,
                    Col2Data: table_templateItems.rows[rowIndex].cells[5].children[0].value,
                    Col2Alignment: table_templateItems.rows[rowIndex].cells[6].children[0].options[Col1Alignment_index].innerText,
                    Col3Data: table_templateItems.rows[rowIndex].cells[7].children[0].value,
                    Col3Alignment: table_templateItems.rows[rowIndex].cells[8].children[0].options[Col1Alignment_index].innerText,
                    Col4Data: table_templateItems.rows[rowIndex].cells[9].children[0].value,
                    Col4Alignment: table_templateItems.rows[rowIndex].cells[10].children[0].options[Col1Alignment_index].innerText,
                    Col5Data: table_templateItems.rows[rowIndex].cells[11].children[0].value,
                    Col5Alignment: table_templateItems.rows[rowIndex].cells[12].children[0].options[Col1Alignment_index].innerText,
                    FontName: table_templateItems.rows[rowIndex].cells[13].children[0].options[selectedFontIndex_dataItem].innerText,
                    FontSize: table_templateItems.rows[rowIndex].cells[14].children[0].value,
                });
            }
        }
        var selectedFontIndex = table.rows[headeTableRowIndex].cells[2].children[0].options["selectedIndex"];
        var fontName = table.rows[headeTableRowIndex].cells[2].children[0].options[selectedFontIndex].innerText;
        template = {
            TemplateId: table.rows[headeTableRowIndex].cells[0].children[0].innerHTML,
            TemplateName: table.rows[headeTableRowIndex].cells[1].children[0].value,
            FontName: fontName,
            FontSize: table.rows[headeTableRowIndex].cells[3].children[0].value,
            PrintTemplateItems: templateDateItems
        };


        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("UpdatePrintTemplate", "SiteSetup")',
            data: JSON.stringify({ template: template }),
            dataType: "json",
            success: function (data) {
                alert('Data Saved');
            },
            error: function (e) {
                alert(e);
            }
        });
    }
</script>
<div id="templateData">
</div>

<div class="action">
    <button class="btn btn-primary btn-md" role="button" onclick="SavePrintTemplates()">Save</button>
    <button id="addRow" class="btn btn-primary btn-md" role="button">Add</button>
    <button class="btn btn-primary btn-md" role="button" onclick="history.back();" id="back">Back</button>
    <button class="btn btn-primary btn-md" role="button" onclick="location.href='/'">Close</button>
</div>

